<template>
  <view class="container">
    <view class="hor-layout-center">
      <view class="main-title">产品名称:</view>
      <input class="input-view name" placeholder="请输入名称" v-model="product.title"/>
    </view>
    <view class="ver-layout info-item" style="margin-top: 40px">
      <view class="hor-layout">
        <view class="info-title">1.产品图片:</view>
        <view class="add-image" hover-class="active" hover-stay-time="100" @click="chooseImage">选择</view>
      </view>
      <scroll-view scroll-x="true" style="margin-top: 15px;">
        <view class="hor-layout" style="width: fit-content;">
          <block v-for="(url,index) in product.imageLocal">
            <image :src="url" mode="scaleToFill" class="product-image"></image>
          </block>
        </view>
      </scroll-view>
    </view>
    <view class="ver-layout info-item">
      <view class="info-title">2.产品信息:</view>
      <textarea class="input-area" placeholder="请输入产品信息" v-model="product.info"></textarea>
    </view>
    <view class="ver-layout info-item">
      <view class="info-title">3.使用问题:</view>
      <textarea class="input-area" placeholder="请输入使用问题" v-model="product.use"></textarea>
    </view>
    <view class="ver-layout info-item">
      <view class="info-title">4.注意事项:</view>
      <textarea class="input-area" placeholder="请输入注意事项" v-model="product.note"></textarea>
    </view>
    <view class="create-product" hover-class="active" hover-stay-time="100" @click="createProduct">提交</view>
  </view>
</template>

<script>
import uploadFile from '@/common/ossutil/uploadFile.js'
import productRule from './product-rule.js'
import {product} from "@/router.js";

var graceChecker = require("@/common/graceChecker.js");
export default {
  data() {
    return {
      product: {
        title: "",
        info: '',
        use: '',
        note: '',
        image: [],
        imageLocal: [],
      },
      rule: productRule.rule
    }
  },
  mounted() {

  },
  methods: {
    async createProduct() {
      var checkRes = graceChecker.check(this.product, this.rule);
      if (!checkRes) {
        uni.showToast({
          title: graceChecker.error,
          icon: "none"
        });
        return
      }
      this.uploadImage().then(res => {
        console.log("uploadImage==", product)
        uniCloud.callFunction({
          name: 'database',
          data: {
            collection: 'product',
            type: "add",
            add: {...this.product, imageLocal: ''}
          }
        }).then(res => {
          if (res.success) this.$tools.pageCallBackDelay(product, 'getProductList', '', '新增成功！')
        })
      })
    },
    chooseImage() {
      console.log("chooseImage=========", this.product.imageLocal)
      uni.chooseImage({count: 1}).then(res => {
        let path = res[1].tempFilePaths[0]
        this.product.imageLocal = [...this.product.imageLocal, path]
      })
    },
    async uploadImage() {
      return new Promise(async (resolve, reject) => {
        for (let i = 0; i < this.product.imageLocal.length; i++) {
          await uploadFile(this.product.imageLocal[i], 'wx-uniapp'
              , (res) => this.product.image = [...this.product.image, res]
              , (err) => resolve(err))
        }
        resolve(this.product.image)
      })
    }
  }
}
</script>

<style>
page {
  padding: 15px;
}

.main-title {
  color: #ed143d;
  font-size: 15px;
  font-weight: bold;
}

.product-image {
  width: 60px;
  height: 60px;
  margin-right: 20px;
  border: 1px solid #eaeaea;
}

.input-view,
.input-area {
  background: #e4e4e4;
  color: #111111;
  padding: 5px 10px;
  border-radius: 3px;
  font-size: 14px;
}

.input-view {
  margin-left: 10px;
}

.input-view.name {
  width: calc(300px - 78px);
}

.input-area {
  margin-top: 5px;
  max-height: 60px;
}

.create-product,
.add-image {
  color: white;
  font-size: small;
  text-align: center;
  border-radius: 5px;
  background: #007AFF;
}

.create-product {
  position: fixed;
  width: 80%;
  left: 10%;
  bottom: 10px;
  height: 35px;
  line-height: 35px;
}

.add-image {
  width: fit-content;
  font-size: smaller;
  padding: 2px 10px;
  border-radius: 2px;
  margin-left: 10px;
}

.active {
  background: #0064d0;
}

.info-item {
  margin-top: 10px
}

.info-title {
  color: #646262;
  font-size: 13px;
  font-weight: bold;
}
</style>
